<template>
  <div class="reg-container">
    <div class="logo">
      <img src="@/assets/login.png">
    </div>
    <main>
      <div class="user-msg">
        <van-cell-group>
          <van-field v-model="uname"
                     left-icon="contact"
                     placeholder="请输入用户名(邮箱)"
                     :error-message="msg"
                     clearable />
          <van-field v-model="upwd"
                     type="password"
                     left-icon="points"
                     placeholder="请输入密码"
                     clearable />
          <van-field v-model="ucheck"
                     center
                     clearable
                     left-icon="envelop-o"
                     placeholder="请输入邮箱验证码">
            <van-button slot="button"
                        size="small"
                        type="primary"
                        round
                        :disabled="disabled"
                        @click="sendCode"
                        :text="text"></van-button>
          </van-field>
        </van-cell-group>
        <router-link to="/login"
                     class="login">立即登录</router-link>
        <van-button type="info"
                    size="large"
                    round
                    @click="reg">注册</van-button>
      </div>
    </main>
  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  data() {
    return {
      uname: '',
      upwd: '',
      ucheck: '',
      disabled: false,
      text: '发送验证码'
    }
  },
  methods: {
    // 发送验证码
    sendCode(e) {
      if (!this.msg && this.uname) {
        this.axios.get('/user/code', { params: { uname: this.uname } }).then(res => {
          Toast(res.data.msg);
        })
        var timer = 60;
        var t = setInterval(() => {
          this.disabled = true;
          this.text = timer + '秒';
          timer--;
          if (timer < 0) {
            clearInterval(t);
            this.disabled = false;
            this.text = '发送验证码';
          }
        }, 1000);
      }
    },
    // 注册
    reg() {
      if (!(this.uname && this.upwd && this.ucheck)) {
        Toast('内容不能为空')
        return
      }
      let user = { uname: this.uname, upwd: this.upwd, ucheck: this.ucheck }
      this.axios.post('/user/register', user).then(res => {
        Toast(res.data.msg)
        if (res.data.code == 1 || res.data.code == -1) {
          this.uname = this.upwd = this.ucheck = ''
          setTimeout(() => {
            this.$router.push({ path: 'login', query: user })
          }, 2000)
        }
      })
    }
  },
  computed: {
    msg() {
      var emailReg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
      if (!emailReg.test(this.uname) && this.uname != '') {
        return '邮箱格式不对'
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="scss">
.reg-container {
  .logo {
    text-align: center;
    padding-top: 1rem;
    img {
      width: 4.2rem;
      height: 4.2rem;
    }
  }
  main {
    margin: 1rem;
    border: 1px solid #aaa;
    border-radius: 8px;
    .user-msg {
      padding: 0.3rem;
      .van-cell {
        border-bottom: 1px solid #ccc;
        padding: 0.1rem;
        font-size: 0.4rem;
        margin: 0.1rem 0;
        .van-field__error-message {
          line-height: 0.38rem;
          font-size: 0.3rem;
        }
      }
      i {
        font-size: 0.5rem;
        line-height: 0.6rem;
      }
      .login {
        display: inline-block;
        font-size: 0.3rem;
        margin-bottom: 0.3rem;
        color: #1989fa;
      }
      .van-button--large {
        margin-top: 0.15rem;
        height: 1rem;
        line-height: 1rem;
      }
    }
  }
}
</style>